<template>
  <div class="app-container">
    <!-- 头部搜索 -->
   <div class="filter-container">
      <!-- <el-select v-model="selectValue"  placeholder="请选择" class='inp_search'>
          <el-option
          v-for="item in optionsData"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
      </el-select>
      
      <el-input
          placeholder="输入查询"
          v-model="input_conten"
          clearable class='inp_search'>
      </el-input>

      <el-button  class="filter-item" type="primary" icon="el-icon-search" @click="searchList">
        搜索
      </el-button> -->
      <el-button v-if="role == '4'"  class="filter-item" type="success" icon="el-icon-plus" @click="addStock('add','ruleForm')">
        添加
      </el-button>
    </div>
     
     <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <el-table-column label="序号" width="120" align="center" prop='num'>
        <template slot-scope="scope">
          <span v-if="scope.row.proportionId === null">--</span>
          <span v-else> {{scope.row.proportionId}} </span>
        </template>
      </el-table-column>

      <el-table-column label="门店Id" min-width="200" align="center" prop='storeId'>
        <template slot-scope="scope">
          <span v-if="scope.row.storeId === null">--</span>
          <span v-else> {{scope.row.storeId}} </span>
        </template>
      </el-table-column>

      <el-table-column label="门店名称" min-width="200" align="center" prop="storeName">
        <template slot-scope="scope">
          <span v-if="scope.row.storeName === null">--</span>
          <span v-else> {{scope.row.storeName}} </span> 
        </template>
      </el-table-column>

      <el-table-column label="总部考核系数" min-width="200" align="center" prop="amount1">
        <template slot-scope="scope">
          <span v-if="scope.row.headquartersAssessment === null">--</span>
          <span v-else> {{scope.row.headquartersAssessment}} </span>
        </template>
      </el-table-column>

      <el-table-column label="门店考核系数" min-width="200" align="center" prop="amount2">
        <template slot-scope="scope">
          <span v-if="scope.row.storeAssessment === null">--</span>
          <span v-else> {{scope.row.storeAssessment}} </span>
        </template>
      </el-table-column>

       <el-table-column label="员工考核系数" min-width="200" align="center" prop="amount3">
        <template slot-scope="scope">
          <span v-if="scope.row.staffAssessment === null">--</span>
          <span v-else> {{scope.row.staffAssessment}} </span>
        </template>
      </el-table-column>

      <el-table-column label="总部分润系数" min-width="200" align="center" prop="amount1">
        <template slot-scope="scope">
          <span v-if="scope.row.headquartersDistribution === null">--</span>
          <span v-else> {{scope.row.headquartersDistribution}} </span>
        </template>
      </el-table-column>

      <el-table-column label="门店分润系数" min-width="200" align="center" prop="amount2">
        <template slot-scope="scope">
          <span v-if="scope.row.storeDistribution === null">--</span>
          <span v-else> {{scope.row.storeDistribution}} </span>
        </template>
      </el-table-column>

       <el-table-column label="员工分润系数" min-width="200" align="center" prop="amount3">
        <template slot-scope="scope">
          <span v-if="scope.row.staffDistribution === null">--</span>
          <span v-else> {{scope.row.staffDistribution}} </span>
        </template>
      </el-table-column>

      <el-table-column v-if="role == '4'"  label="操作" width="300" align="center"  fixed="right">
        <template scope="scope">
					<el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
				</template>
      </el-table-column>
    </el-table>
   <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" 
     @pagination="fetchData"  />

   <!-- 添加 -->
   <div class='formPosition' v-if='dialogFormVisible'>
   <div class='titleForm'>
          <div class='left_titleForm'>{{titleName}}</div>
          <span class="icon iconfont right_titleForm" @click="resetForm('ruleForm')">&#xe72d;</span>
   </div>
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm " :visible.sync="dialogFormVisible">
         <el-row :gutter="20" v-if=" titleName== '添加'">
            <el-col :span="12">
                <el-form-item  class='formItemStyle' label="门店" prop="addSelectStores" label-width="120px">
                      <el-select v-model="ruleForm.addSelectStores"  placeholder="请选择" class='select_roles' @change="getStaff(ruleForm.addSelectStores)">
                            <el-option
                            v-for="item in optionsStores"
                            :key="item.userId"
                            :label="item.userName"
                            :value="item.phone">  
                            </el-option>
                      </el-select>
                  </el-form-item>
                </el-col>

                <!-- <el-col :span="12" >
                   <el-form-item  class='formItemStyle' label="员工" prop='addSelectstaff' label-width="120px">
                      <el-select ref="ruleForm.addSelectstaff" v-model="ruleForm.addSelectstaff"  placeholder="请选择" class='select_roles' @change="changeStaff(ruleForm.addSelectstaff)">
                            <el-option
                            v-for="item in optionsstaff"
                            :key="item.userId"
                            :label="item.userName"
                            :value="item.userId">
                            </el-option>
                      </el-select>
                  </el-form-item>
                </el-col>  -->
                
          </el-row>
          <el-row :gutter="20" v-if=" titleName== '修改'">
            <el-col :span="12">
                 <el-form-item  class='formItemStyle' label="门店" prop="storeName">
                      <el-input v-model="ruleForm.storeName" readonly></el-input>
                  </el-form-item>
             </el-col>

             <el-col :span="12">
                 <el-form-item  class='formItemStyle' label="门店ID" prop="storeId">
                      <el-input v-model="ruleForm.storeId" readonly></el-input>
                  </el-form-item>
             </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item  label="总部分润系数" prop='headquartersDistribution' label-width="120px">
                    <el-input v-model="ruleForm.headquartersDistribution"  type="number" min="0.00" max="1.00" step="0.01"></el-input>
                </el-form-item>
            </el-col>
  
            <el-col :span="12" >
                <el-form-item  label="总部考核系数" prop='headquartersAssessment' label-width="120px">
                    <el-input v-model="ruleForm.headquartersAssessment"  type="number" min="0.00" max="1.00" step="0.01"></el-input>
                </el-form-item>
            </el-col> 
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item  label="门店分润系数" prop='storeDistribution' label-width="120px">
                    <el-input v-model="ruleForm.storeDistribution"  type="number" min="0.00" max="1.00" step="0.01"></el-input>
                </el-form-item>
            </el-col>
                    
            <el-col :span="12" >
                <el-form-item  label="门店考核系数" prop='storeAssessment' label-width="120px">
                    <el-input v-model="ruleForm.storeAssessment"  type="number" min="0.00" max="1.00" step="0.01"></el-input>
                </el-form-item>
            </el-col> 
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item  label="员工分润系数"  porp='staffDistribution' label-width="120px">
                    <el-input v-model="ruleForm.staffDistribution"  type="number" min="0.00" max="1.00" step="0.01"></el-input>
                </el-form-item>
            </el-col>
                    
            <el-col :span="12" >
                <el-form-item  label="员工考核系数"  prop='staffAssessment' label-width="120px">
                    <el-input v-model="ruleForm.staffAssessment"  type="number" min="0.00" max="1.00" step="0.01"></el-input>
                </el-form-item>
            </el-col> 
          </el-row>

          <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>

     </el-form>
    </div>
  </div>
   
   
  
</template>

<script>
import {getUserByRole ,getUserByStaff} from '@/api/orderManage'
import {getProfitSetUpLists ,modifyProfitSetUp ,addProfitSetUp} from '@/api/profitSetUp'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
      role:'',
      input_conten:'',
      optionsData: [{
          value: 'stockId',
          label: '工具ID'
        },{
          value: 'stockName',
          label: '工具名称'
        },],
      selectValue: '',
      titleName:'',
      list: null,
      total:0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
      },
      dialogFormVisible:false,
      optionsStores:[],
      optionsstaff:[],
      ruleForm: {
         addSelectStores:'',
         addSelectstaff:'',
         headquartersDistribution:'',
         headquartersAssessment:'',
         storeDistribution:'',
         storeAssessment:'',
         staffDistribution:'',
         staffAssessment:'',
         storeId:'',
         storeName:'',
         userId:'',
        },
      cleanForm: {
         addSelectStores:'',
         addSelectstaff:'',
         headquartersDistribution:'',
         headquartersAssessment:'',
         storeDistribution:'',
         storeAssessment:'',
         staffDistribution:'',
         staffAssessment:'',
         storeId:'',
         storeName:'',
         userId:'',
        },
        rules: {
          addSelectStores: [
            { required: true, message: '请选择门店', trigger: 'blur' },
          ],
          addSelectstaff: [
            { required: true, message: '请选择员工', trigger: 'blur' }
          ],
          headquartersDistribution: [
            {required: true, message: '请输入正确格式的总部分润系数', trigger: 'blur' },
            { validator: this.valid1}
          ],
          headquartersAssessment: [
            {required: true, message: '请输入正确格式的总部考核系数', trigger: 'blur' },
            { validator: this.valid1 }
          ],
          storeDistribution: [
            {required: true, message: '请输入正确格式的门店分润系数', trigger: 'blur' },
            { validator: this.valid1}
          ],
          storeAssessment: [
            {required: true, message: '请输入正确格式的门店考核系数', trigger: 'blur' },
            { validator: this.valid1}
          ], 
          staffDistribution: [
            {required: true, message: '请输入正确格式的员工分润系数', trigger: 'blur' },
            { validator: this.valid1}
          ],
          staffAssessment: [
            {required: true, message: '请输入正确格式的员工考核系数', trigger: 'blur' },
            { validator: this.valid1}
          ]

        }
    }
  },
  created() {
    this.fetchData()//获取列表数据
    //初始化设置搜索下拉框的值
    const userInfo = localStorage.getItem('userInfo');
    this.role = JSON.parse(userInfo).role;
    this.selectValue = this.optionsData[0].label;
  },
  methods: {
    valid(rule, value, callback){
              if (value < 0 || value > 1) {
      　　　　       callback(new Error('请输入 0 至 1之间的系数'))
            　　} else {
            　　　　callback()
            　　}
          },
    fetchData() {
       this.listLoading = true
       const paramsData = {curPage:this.listQuery.page,pageSize:this.listQuery.limit}
       getProfitSetUpLists(paramsData).then(res => {
        this.list = res.data.obj;
        this.total = res.data.countNum;
        this.listLoading = false
      })
    },
     getRole(){//获取角色/门店
        const para = 1;
        const paramsData = {type:para}
          getUserByRole(paramsData).then(res => {
                    const datas = res.data;
                    this.optionsStores = datas;
                })
      },
      getStaff(para){//获取员工
          var obj = {};
          obj = this.optionsStores.find(item =>{
              return item.phone === para 
          });
          this.ruleForm.storeName = obj.userName;
          this.ruleForm.storePhone = obj.phone;
          this.ruleForm.userId = obj.userId;
          this.ruleForm.storeId = obj.userId;
          
          const paramsData = {phone:para}
          getUserByStaff(paramsData).then(res => {
                    this.ruleForm.addSelectstaff ="";
                    this.$forceUpdate();
                    const datas = res.data;
                    this.optionsstaff = datas;
                    if(datas==""){
                       var obj1 = {}
                       obj1.userName = this.ruleForm.storeName;
                       obj1.phone = this.ruleForm.storePhone;
                       obj1.userId = this.ruleForm.userId;
                       this.ruleForm.storeName = this.ruleForm.storeName;
                       this.optionsstaff.push(obj1)
                    }
                })
      },
   changeStaff(data){
           this.ruleForm.addSelectstaff = data;
           //this.ruleForm.storeId = data;
           for(var i =0;i<this.optionsstaff.length;i++){
             if(this.optionsstaff[i].phone == data){
                this.ruleForm.storeName = this.optionsstaff[i].userName;
                this.$forceUpdate();
             }
          }   
          
      },
   submitForm(formName) {//提交
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.listLoading = true
            if(this.titleName === "添加"){
               this.handleAdd(formName)
            }else{
               this.handleModify(formName)
            }
            this.listLoading = false;
            this.resetForm(formName) 
          } else {
            this.$notify({
                    message: '提交失败',
                    type: 'error',
                    duration: 2000
                })
            return false;
          }
        });
      },
      handleAdd(formName){//添加
            const paramsData = {
                  storeId:this.ruleForm.storeId,
                  storeName:this.ruleForm.storeName,
                  headquantersDistribution:this.ruleForm.headquartersDistribution,
                  headquantersAssessment:this.ruleForm.headquartersAssessment,
                  storeDistribution:this.ruleForm.storeDistribution,
                  storeAssessment:this.ruleForm.storeAssessment,
                  staffDistribution:this.ruleForm.staffDistribution,
                  staffAssessment:this.ruleForm.staffAssessment
                }
              addProfitSetUp(paramsData).then(res => {
                this.list = res.data;
                if(res.code == '200'){
                        this.$notify({
                        message: '门店设置分润成功',
                        type: 'success',
                        duration: 2000
                    })
                  }else if(res.code == '400'){
                    this.$notify({
                        message: '门店已设置分润',
                        type: 'error',
                        duration: 2000
                    })
                  }else{
                    this.$notify({
                        message: '门店设置分润失败',
                        type: 'error',
                        duration: 2000
                    })
                  }
                  this.fetchData()//获取列表
            })
      },
      handleModify(formName){//修改
             const paramsData = {
                  proportionId:this.ruleForm.proportionId,
                  storeId:this.ruleForm.storeId,
                  headquantersDistribution:this.ruleForm.headquartersDistribution,
                  headquantersAssessment:this.ruleForm.headquartersAssessment,
                  storeDistribution:this.ruleForm.storeDistribution,
                  storeAssessment:this.ruleForm.storeAssessment,
                  staffDistribution:this.ruleForm.staffDistribution,
                  staffAssessment:this.ruleForm.staffAssessment
                  }
                modifyProfitSetUp(paramsData).then(res => {
                  this.list = res.data;
                  if(res.code == '200'){
                        this.$notify({
                        message: '修改成功',
                        type: 'success',
                        duration: 2000
                    })
                  }else{
                    this.$notify({
                        message: '修改失败',
                        type: 'error',
                        duration: 2000
                    })
                  }
                  this.fetchData()//获取列表
              })
      },
      resetForm(formName) {//清除弹出框默认值
          this.ruleForm = this.cleanForm;
          this.$refs.ruleForm.resetFields();
          this.dialogFormVisible = false;     
      },
      addStock(formName){//处理弹出框添加和修改的状态
          this.dialogFormVisible = true;     
          this.titleName = '添加'
          this.getRole();
      },
      handleEdit(index, row ) {//修改
          this.titleName = '修改'
          this.dialogFormVisible = true;
          this.ruleForm = Object.assign({}, row);
          this.ruleForm.proportionId = row.proportionId;
          this.getRole();
      },
      
      searchList(){//搜索
          if(this.input_conten){
              if(this.selectValue == "stockName"){//按工具名称搜索
                  const paramsData = {toolName:this.input_conten,curPage:this.listQuery.page,pageSize:this.listQuery.limit}
                  searchByName(paramsData).then(res => {
                      this.list = res.data.obj
                  })
              }else{//按工具id搜索
                  const paramsData = {toolId:this.input_conten}
                  searchByID(paramsData).then(res => {
                      this.list = res.data.obj
                  }) 
              }
          }else{
              this.fetchData();
              // this.$notify({
              //       message: '请先输入搜索内容',
              //       type: 'error',
              //       duration: 2000
              //   })
              return false;
          }
      }

    }
  
 }
</script>
<style lang="scss">
 .filter-container{
   margin-bottom:20px;
 }
 .el-date-range-picker{
   margin-left:220px;
 }
 .inp_search{
   width:20%;
   margin-right:1%;        
 }
 .formPosition{
    width:70%;
    height:auto;
    background:#fff;
    position:absolute;
    left:15%;
    top:5%;
    padding:30px;
    box-shadow: 0px 0px 5px 5px #eee;
    border-radius: 5px;
    z-index:999;
 }
 .demo-ruleForm{
      width:90%;     
 }
 .titleForm{
     width:100%;
     height:30px;
     line-height:30px;
     margin-bottom:20px;
     font-size:1.1em;
     font-weight: 500;
 }
 .left_titleForm{
    float:left;
 }
 .right_titleForm{
    display:block;
    float:right;
 }
 .select_roles{
    width:100%;
 }
</style>
